<template>
  <div>one</div>
</template>

<script>
export default {

}
</script>

<style scoped>
/* 组件的样式冲突scoped
   默认情况：写在组件中的样式会全局生效→因此很容易造成多个组件之间的样式冲突问题。
   1.全局样式：默认的style样式，会作用于全局→全局样式
   2.局部样式：加上scoped属性的style样式，只会作用于当前组件→局部样式
   组件应该有着独立的组件，推荐加上scoped属性
   ----------------------------------------------------
   scoped原理:
   1.给当前组件模板的所有元素，都会被添加上一个自定义属性:data-v-hash值
        data-v-5f6a9d56区分开不同的组件
   2.css选择器后面，被自动处理，添加上了属性选择器
        div[data-v-5f6a9d56]
   最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到

*/
div {
  border: 3px solid red;
  margin: 30px;
}
</style>